<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
        .box-a{
            height: 200px;
            width: 200px;
            background-color: burlywood;
            opacity: 1;
            /* transition: opacity 4s ease; */
        }
        .show{
            opacity: 1;
        }
        .active{
            transition: opacity 4s ease;
        }
        .hide{
            opacity: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- <div v-show="flag" class="box-a" :style=" { opacity:flag?1:0 } "></div>
        <br>
        <div v-if="flag" class="box-a" :style=" { opacity:flag?1:0 } "></div>
        <br> -->
        <!-- 
            vue 通过自定义的动画过渡组件，封装对于页面中DOM元素的动画执行操作；
            同时该类组件会和vue的语法相结合，自动完成vue语法执行时的DOM动画操作;
        -->
        <!-- 
            当vue中被过渡效果组件操作的元素或者其它组件，需要执行动画，不建议在直接对元素或者组件进行样式操作，
            因为 过渡效果组件会自动读取动画的执行时间，并在适合的时间节点完成元素的相关功能操作，
            但过渡效果组件无法区分定义的动画是元素或组件显示时的动画，还是元素或组件隐藏时的动画；

            过渡效果组件内置提供多种 父向子属性，和子向父事件，用于在过渡效果组件上进行动画自定义或动画控制
        -->
        <transition
            enter-from-class="hide" enter-active-class="active" enter-to-class="show"
            leave-from-class="show" leave-active-class="active" leave-to-class="hide"
            @after-enter=" flag1=true "
            @after-leave=" flag1=false "
        >
            <!-- <div v-show="flag" class="box-a" :style=" { opacity:flag?1:0 } "></div> -->
            <!-- <div v-show="flag" class="box-a"></div> -->
            <div v-if="flag" class="box-a"></div>
        </transition>
        <br>
        <transition
            enter-from-class="hide" enter-active-class="active" enter-to-class="show"
            leave-from-class="show" leave-active-class="active" leave-to-class="hide"
        >
            <div v-if="flag1" class="box-a"></div>
        </transition>
        <br>
        <input type="button" value="显示|隐藏" @click=" flag=!flag ">
    </div>
    <script type="module"> 
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    flag:true,
                    flag1:true
                }
            }
        }).mount("#app")
    </script>
</body>
</html>